<template>
  <a-modal
    v-model:open="visible"
    title="关联操作"
    class="operateModal"
    destroyOnClose
    :width="480"
    @cancel="cancel"
    centered
  >
    <div class="operateForm" v-if="showForm">
      <a-form :model="form" :rules="rules" ref="formRef">
        <a-form-item label="关联操作编号" name="relateOperateCodeList">
          <!-- <a-input
            v-model:value="form.relateOperateCodeList"
            placeholder="请输入"
            class="formInput"
          /> -->
          <a-select
            v-model:value="form.relateOperateCodeList"
            class="formSelect"
            placeholder="请选择"
            show-search
            optionFilterProp="label"
            allow-clear
            mode="multiple"
          >
            <a-select-option
              v-for="item in operateLogList"
              :key="item.stationId"
              :value="item.operateCode"
              :label="item.operateCode"
            >
              {{ item.operateCode }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <!--  <div class="formBtns">
        <a-button @click="() => (showForm = false)">关闭</a-button>
        <a-button type="primary" @click="handleSave">保存</a-button>
      </div> -->
    </div>
    <div class="content" v-else>
      <!-- 有已关联的操作 -->
      <div v-if="props.rowData && props.rowData.relateOperateCode">
        <span>关联操作编号：{{ props.rowData.relateOperateCode }}</span>
      </div>
      <!-- 无已关联的操作 -->
      <div class="tip" v-else>暂未关联操作，可点击添加去关联</div>

      <!--  <a-button type="primary" class="addBtn" @click="handleAdd">添加</a-button> -->
    </div>

    <template #footer>
      <a-button @click="cancel">取消</a-button>

      <a-button type="primary" @click="handleSave" v-if="showForm"
        >确定</a-button
      >

      <template v-else>
        <a-button
          type="primary"
          @click="handleAdd"
          v-if="props.rowData && props.rowData.relateOperateCode"
          >修改</a-button
        >
        <a-button type="primary" @click="handleAdd" v-else>添加</a-button>
      </template>
    </template>
  </a-modal>
</template>

<script setup>

const $api = inject("$api")
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {},
  },
})

const emit = defineEmits(["update:visible", "refresh"])
const isEdit = ref(false)
const visible = ref(false)
const showForm = ref(false)
const formRef = ref()
const form = ref({
  id: "",
  relateType: 2,
  relateOperateCodeList: [],
})

const rules = {
  relateOperateCodeList: [{ required: true, message: "请输入关联操作编号" }],
}

const handleAdd = () => {
  showForm.value = true
}

const handleSave = async () => {
  try {
    await formRef.value.validate()
    // TODO: 调用保存接口
    let res = await $api.faultDealRelate(form.value)
    if (res && res.code === 0) {
      message.success("操作成功")
    }
    emit("refresh")
    cancel()
  } catch (error) {
    console.log("validation failed", error)
  }
}

const cancel = () => {
  formRef.value?.resetFields()
  showForm.value = false
  emit("update:visible", false)
}

const handleOk = () => {
  emit("update:visible", false)
}

watch(
  () => props.visible,
  (val) => {
    visible.value = val
    handleSearchStationName()
    if (val && props.rowData) {
      console.log("props.rowData", props.rowData)
      form.value = {
        id: props.rowData.id,
        relateType: props.rowData?.relateType || 2,
        relateOperateCodeList: props.rowData?.relateOperateCodeList || [],
      }
    }
  }
)
//获取列表
const operateLogList = ref([])
const handleSearchStationName = async () => {
  const res = await $api.operateLogList({})
  operateLogList.value = res.data
}
</script>

<style lang="less" scoped>
.operateModal {
  .content {
    padding: 20px;
    .tip {
      margin-bottom: 20px;
      color: #666;
      text-align: center;
    }
  }
  .operateForm {
    padding: 20px;
    //border-top: 1px solid #eee;
    .formInput {
      width: 100%;
    }
    .formBtns {
      text-align: right;
      margin-top: 20px;
      button {
        margin-left: 8px;
      }
    }
  }
}
</style>
